<template>
	<!--  v-if="!empty" -->
	<view class="money-back" v-if="!empty">
		<view class="inset-group">
			<view class="title">
				退款商品
			</view>
			<view class="goods-info">
				<view class="top-desc">
					<image :src="orderDetail.pic" mode="widthFix"></image>
					<view class="center-desc">
						<text class="title">{{orderDetail.goods_title}}</text>
						<view class="tag" style="background-color: #f5f5f5;color:#777 ;">规格：{{orderDetail.goods_skuname}}</view>
						<!-- <text class="tag" size="medium" color="#f5f5f5" text-color="#777">包装规格：40包</text> -->
						<!-- <van-tag class="tag" size="medium" color="#fff" text-color="#f4c883">发货时间：付款后3天内</van-tag> -->
					</view>
				</view>
			</view>
		</view>
		<view class="inset-group" v-if="type==0">
			<view class="title">选择服务类型<text>（非产品质量问题，退货运费自理）</text></view>
			<view class="cell-wrap" @click="selType(1)" v-if="orderDetail.status=='待发货'">
				<view class="address-wrapper">
					<image src="https://cdn.chilli.red/hippoShop/uniShop/static/images/return-price.png" mode="widthFix"></image>
					<view class="address-info">
						<view>
							<text class="name">我要退款（无需退货）</text>
						</view>
						<view class="desc">商家未发货</view>
					</view>
				</view>
				<uni-icons type="right" color="#999" size="20"></uni-icons>
			</view>
			<view class="cell-wrap" @click="selType(2)" v-if="orderDetail.status!=='待发货'">
				<view class="address-wrapper">
					<image src="https://cdn.chilli.red/hippoShop/uniShop/static/images/return-goods.png" mode="widthFix"></image>
					<view class="address-info">
						<view>
							<text class="name">我要退货退款</text>
						</view>
						<view class="desc">已收到货，需要退还收到的货物</view>
					</view>
				</view>
				<uni-icons type="right" color="#999" size="20"></uni-icons>
			</view>
		</view>
		
		<view class="inset-group" v-if="type !== 0">
			<view class="title">
				退款信息
			</view>
			<view class="cell-wrap">
				<view class="address-wrapper">
					<view class="address-info">
						<view>
							<text class="name">退款金额</text>
						</view>
						<!-- <view class="desc">不可修改，最多￥49.9，含发货运费￥0，包含部分红包</view> -->
					</view>
					<view class="money">
						￥{{orderDetail.goods_payprice/100}}
					</view>
				</view>				
			</view>
			<template v-if="type === 2">
				<view class="cell-wrap">
					<view class="address-wrapper">
						<view class="address-info">							
							<view class="name" style="position: relative;width: 110%;z-index: 9999;">
								<!-- 退款原因 -->
								<picker @change="bindPickerChange" mode="selector" range-key="name" :range="refundType">
									<view class="uni-input">退款原因:&nbsp;&nbsp;{{selRefundType}}</view>
								</picker>
							</view>
						</view>
					</view>
					<uni-icons type="right" color="#999" size="20"></uni-icons>
				</view>
				<view class="cell-wrap">
					<view class="address-wrapper">
						<view class="address-info">
							<view>
								<text class="name">退货方式：自行寄回</text>
							</view>
							<view class="desc">提交后填写寄回快递信息(非产品质量问题，退货运费自理)</view>
						</view>
						<!-- <view class="money">
							自行寄回
						</view> -->
					</view>
				</view>
				<view class="cell-wrap">
					<view class="address-wrapper">
						<view class="address-info">
							<view>
								<text class="name">补充描述凭证</text>
							</view>
							<textarea placeholder="补充描述，有助于商家更好的处理售后问题" :value="refund_cause" @input="causeChange" disable-default-padding="true" style="height: 100px;width: 100%;">							
							</textarea>
							<upload @fileListChange="fileListChange"></upload>
						</view>
					</view>
				</view>
			</template>			
		</view>
		
		<view class="btn" v-if="type!=0">
			<button :disabled="!flag" @click="submit">
				提交
			</button>
		</view>
	</view>
</template>

<script>
	import api from "../../api/api.js"
	export default {
		data() {
			return {
				type:0,		//服务类型
				index:0,
				refund_cause:"",
				orderDetail:{},
				empty:true,
				fileList:[],
				selRefundType:"",
				refundType:[],
				flag:true
			}
		},
		async onLoad(options) {
			await this.$onLaunched;	
			this.init(options.order_id)
		},
		methods: {
			causeChange(e){
				this.refund_cause = e.detail.value;
			},
			fileListChange(arr){
				this.fileList = arr;
			},
			init(orederId){
				if(orederId){
					this.getDetail(orederId)
				}else{
					uni.showToast({
						icon:"none",
						title:"该订单不支持售后！"
					})
				}
			},
			async getRefundType(){
				const result = await api.getRefundType({});
				this.refundType = result.data
			},
			getDetail(orderId){
				uni.showLoading()
				api.getOrderDetail({
					order_id:orderId+""
				}).then((res)=>{
					if(res.status==0){
						this.orderDetail = res.data.order
						this.empty = false
					}
					uni.hideLoading()
				})
			},
			bindPickerChange(e){
				this.index = e.detail.value
				this.selRefundType = this.refundType[this.index].name
			},
			selType(type){
				this.type=type ;  //1未发货仅退款
				if(type==2)this.getRefundType()
			},
			async submit(){
				if(!this.flag)return
				this.flag=false
				if(this.type==2&&(this.selRefundType == ""||this.refund_cause==""||this.refund_cause.length<2)){
					if(this.refund_cause.length<2){
						uni.showToast({
							icon:"none",
							title:"退款原因描述过短!",
							success: () => {
								this.flag=true
							}
						})
					}else{
						uni.showToast({
							icon:"none",
							title:"退款分类、退款原因、退款证明图片必传!",
							success: () => {
								this.flag=true
							}
						})
					}
					
				}else{
					uni.showLoading()
					let result = await api.orderRefund({
						order_id:this.orderDetail.order_id,
						refund_type:this.selRefundType==""?"":this.refundType[this.index].id,
						refund_cause:this.refund_cause,
						refund_imgs:this.fileList.join(',')
					})
					if(result.status==0){
						uni.showToast({
							icon:"none",
							title:"提交成功，等待商家处理！",
							success: () => {
								this.flag=true
								this.$uniGo('redirectTo',{
									url:"../order/order-detail?orderid="+this.orderDetail.order_id
								})
								// uni.redirectTo({
								// 	url:"../order/order-detail?orderid="+this.orderDetail.order_id
								// })
							}
						})
					}else{
						this.flag=true
					}
					this.flag=true
					uni.hideLoading()
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.money-back{
		padding: 30rpx;
		.inset-group>.title{
			font-size: 30rpx;
			font-weight: bold;
			margin: 30rpx;
			text{
				font-weight: normal;
				font-size: 24rpx;
				color: #c6c6c6;
			}
		}
	}
	.address-wrapper{
		width: 100%;
		display: flex;
		align-items: center;
		image{
			width: 50rpx;
			height: auto;
		}
		.money{
			font-weight: bold;
			color: #db592a;
			font-size: 32rpx;
			margin-left: 20rpx;
		}
		.address-info{
			width: 100%;
			font-size: 24rpx;
			margin-left: 20rpx;			
			.name{
				font-size: 30rpx;
				// font-weight: bold;
				margin-right: 15rpx;
				margin-bottom: 10rpx;				
			}
			.phone{
				color: #aeaeae;
				
			}
			.desc{
				line-height: 1.5;
				color: #bbbbbb;
			}
			textarea{
				background: #f7f7f7;
				border-radius: 20rpx;
				margin: 10rpx 0;
				padding: 20rpx;
				box-sizing: border-box;
				height: 100rpx;
			}
		}
	}
	.cell-wrap{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
	}
	.goods-info{
		font-size: 28rpx;
		.top-desc{
			display: flex;
			justify-content: space-between;
			margin: 20rpx 30rpx;
			image{
				width: 180rpx;
				min-width: 180rpx;
				max-width: 180rpx;
				height: 180rpx;
				border-radius: 10rpx;
			}
			.center-desc{
				margin: 0 50rpx 0 30rpx;
				.title{
					display: block;
					height: 80rpx;
					line-height: 40rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.tag{
					display: block;
					margin: 10rpx 0;
				}
			}
			.right-desc{
				text-align: right;
				.num{
					font-size: 24rpx;
					color: #969799;
				}
			}
		}
		.bottom-info{
			margin-left: 30rpx;
			.item{
				display: flex;
				justify-content: space-between;
			}
			.pay-num{
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.order-beizhu{
				display: flex;
				align-items: center;
				input{
					flex: 1;
					margin-left: 20rpx;
				}
			}
			::v-deep .van-tag{
				border: 1rpx #ff6f7b solid;
				padding: 0 8rpx;
				margin-left: 20rpx;
			}
			.right-text,
			::v-deep .van-cell__value{
				color: #000;
			}
		}
	}	
	.btn{
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 20rpx 50rpx;
		background: #fff;
		box-sizing: border-box;
		button{
			background-color: $theme-color;
			color: #fff;
			border-radius: 100rpx;
		}
	}
</style>
